<template>
  <div>
    <div class="container">
      <div class="tree">
        <tree :treeDto="treeData.treeDto" />
      </div>
      <div class="content">

        <h1 v-show="showContent == false">包的介绍</h1>
        <pre class="page-content" style="display: none;">请在左侧选择一个包内容</pre>


        <h1 v-show="showContent == true">代码讲解</h1>
        <pre class="file-content" style="display: none;">请在左侧选择一个文件查看代码讲解</pre>
      </div>
    </div>
  </div>
</template>

<script setup>
import tree from './components/tree.vue'
import { onMounted, reactive, ref } from 'vue'
import { infoCode } from '@/api/user.js'
import { notification } from 'ant-design-vue';
const treeData = reactive({
  resourcesDto
    : [], treeDto: []
})
const getInfoCodeData = () => {
  infoCode({ orderNo: '12' }).then(res => {
    if (res.data.treeDto) {
      treeData.resourcesDto = res.data.resourcesDto
      treeData.treeDto = res.data.treeDto
      notification.open({
        key: "updatable",
        message: '提醒',
        description: "请在左侧选择一个包可以进行包的讲解或选择一个文件查看代码讲解",
      });
    }
  })
}
getInfoCodeData()
const showContent = ref(undefined)
onMounted(() => {
  setTimeout(() => {
    const treeItems = document.querySelectorAll('.tree li');
    const fileContents = document.querySelector('.file-content');
    const pageContents = document.querySelector('.page-content');
    // 添加点击事件监听器
    treeItems.forEach(item => {
      item.addEventListener('click', toggleTreeItem);
    });

    function toggleTreeItem(event) {
      event.stopPropagation();
      const item = event.currentTarget;
      const children = item.querySelector('.children');

      // 切换当前节点的展开/收起状态
      item.classList.toggle('active');
      if (children) {
        children.style.display = item.classList.contains('active') ? 'block' : 'none';
      }
      // 如果点击的是文件节点,显示文件内容
      if (item.classList.contains('file')) {
        fileContents.textContent = item.dataset.content;
        fileContents.style.display = "block"
        pageContents.style.display = "none"
        showContent.value = true
      } else {
        pageContents.textContent = item.dataset.content;
        fileContents.style.display = "none"
        pageContents.style.display = "block"
        showContent.value = false
      }
    }


  }, 1000)
})

</script>

<style scoped lang="scss">
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #1c1c1e;
  color: #f0f0f0;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100vh;
  color: white;
}

.content {
  flex-grow: 1;
  // padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content h1 {
  font-size: 48px;
  margin-bottom: 30px;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.content pre {
  background-color: #2b2b2b;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  font-size: 18px;
  max-width: 65vw;
  max-height: 1000px;
  width: 100%;
  overflow-x: auto;
}


.content pre::-webkit-scrollbar {
  width: 8px;
  /* 滚动条宽度 */
  height: 8px;
  /* 滚动条高度 */
}

.content pre::-webkit-scrollbar-track {
  background-color: #1a1a1a;
  /* 滚动条轨道背景色 */
  border-radius: 6px;
  /* 滚动条轨道圆角 */
}

.content pre::-webkit-scrollbar-thumb {
  background-color: #606060;
  /* 滚动条拇指颜色 */
  border-radius: 6px;
  /* 滚动条拇指圆角 */
  transition: background-color 0.3s ease;
  /* 滚动条拇指颜色过渡动画 */

}

.content pre::-webkit-scrollbar-button {
  display: none;
  /* 隐藏滚动条上下箭头 */
}

.content pre::-webkit-scrollbar-thumb:hover {
  background-color: #808080;
  /* 滚动条拇指hover时的颜色 */
}

</style>